<template>
    <div>
        <el-card style="width: 70%;margin: auto">
            <div slot="header" style="display: flex;align-items: center;justify-content: space-between">
                <h3 style="margin: 0px">分类浏览</h3>
                <el-select v-model="cateId" @change="getList(10,page-1,cateId)">
                    <el-option v-for="(item,index) in bookCategories" :value="item.cate_id" :label="item.name" :key="index" ></el-option>
                </el-select>
            </div>

            <book-list :book-list="bookList"></book-list>
            <el-pagination  :current-page="page" @current-change="change"></el-pagination>
        </el-card>

    </div>
</template>

<script>
    import axios from 'axios'
    import BookList from "../../reusable/BookList";
    export default {
        name: "CategorySearch",
        components:{BookList},
        data(){
            return{
                cateId:this.$route.query.cateId,
                bookList:[],
                bookCategories:[
                    {
                        name:'哲学宗教类',
                        cate_id:1
                    },
                    {
                        name:'科学类',
                        cate_id:2
                    },
                    {
                        name:'政治法律类',
                        cate_id:3
                    },
                    {
                        name:'军事类',
                        cate_id:4
                    },
                    {
                        name:'经济类',
                        cate_id:5
                    },
                    {
                        name:'文化教育类',
                        cate_id:6
                    },
                    {
                        name:'历史类',
                        cate_id:7
                    },
                    {
                        name:'医药卫生类',
                        cate_id:8
                    },
                ],
                page:1
            }
        },
        mounted() {
            this.getList(10,this.page-1,this.cateId)
        },
        methods:{
            change(val){
                this.page = val;
                this.getList(10,this.page-1,this.cateId);
            },
            getList(size,page,category){
                let mydata = {
                    page: page*size,
                    size: size,
                    cateIds:[category]
                }
                axios.post('/api/book/searchBookByCategory',mydata).then((res)=>{
                    this.bookList = res.data.data[0]
                    console.log(this.bookList)
                })
            },
        }
    }
</script>

<style scoped>

</style>
